<div class="card nxt-modal">
  <div class="card-header">
    <h2>创建网络</h2>
    <ul class="actions">
      <li>
        <a href="" ng-click="cancel()">
          <i class="zmdi zmdi-close"></i>
        </a>
      </li>
    </ul>
  </div>

  <!-- card body -->
  <div class="card-body">
    <!-- slide wrapper -->
    <div class="slide-wrapper" id="slide-wrapper">
      <div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500 required">名称</p></div>
          <div class="col-sm-6">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.name" class="form-control" >
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500 required">局域网ID</p></div>
          <div class="col-sm-6">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.vlanID" class="form-control" >
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500 required">网关配置</p></div>
          <div class="col-sm-6">
            <div class="form-group" ng-class="{'has-error': config.gateway == undefined}">
              <div class="fg-line">
                <input type="text" ng-model="config.gateway" class="form-control" placeholder="格式：10.1.1.1/24" ng-pattern="regex">
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button class="btn btn-primary" ng-click="goNext()" ng-class="{'disabled': !config.gateway}">&nbsp;&nbsp;&nbsp;详细配置&nbsp;&nbsp;&nbsp;</button>
          <button class="btn btn-primary pull-right" ng-click="finish()" ng-class="{'disabled': !config.gateway}">&nbsp;&nbsp;&nbsp;完成&nbsp;&nbsp;&nbsp;</button>
        </div>
      </div>

      <div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500">DNS服务器</p></div>
          <div class="col-sm-4">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.dnsServer" class="form-control">
              </div>
            </div>
          </div>
          <div class="col-sm-2"><p class="c-black f-500">域名</p></div>
          <div class="col-sm-4">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.domains" class="form-control">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <p class="c-black f-500">局域网地址分配池</p>
          </div>
          <div class="col-sm-4">
            <button class="btn btn-primary" ng-hide="config.pools.length > 3" ng-click="addPool()"><i class="zmdi zmdi-plus"></i></button>
            <button class="btn btn-primary" ng-hide="config.pools.length < 1" ng-click="deletePool()"><i class="zmdi zmdi-minus"></i></button>
          </div>
        </div>
        <div clas="row" ng-repeat="pool in config.pools">
          <div class="col-sm-2"><p class="c-black f-500">起始地址</p></div>
          <div class="col-sm-4">
            <div class="form-group" ng-class="{'has-error': pool.startAddr == undefined}">
              <div class="fg-line">
                <input type="text" ng-model="pool.startAddr" class="form-control" ng-pattern="ipRegex">
              </div>
            </div>
          </div>
          <div class="col-sm-2"><p class="c-black f-500">终止地址</p></div>
          <div class="col-sm-4">
            <div class="form-group" ng-class="{'has-error': pool.endAddr == undefined}">
              <div class="fg-line">
                <input type="text" ng-model="pool.endAddr" class="form-control" ng-pattern="ipRegex">
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button class="btn btn-primary" ng-click="goPre()">&nbsp;&nbsp;&nbsp;上一步&nbsp;&nbsp;&nbsp;</button>
          <button class="btn btn-primary pull-right" ng-click="finish()">&nbsp;&nbsp;&nbsp;完成&nbsp;&nbsp;&nbsp;</button>
        </div>
      </div>

      <div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500 required">局域网ID</p></div>
          <div class="col-sm-6">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.vlanID" class="form-control" >
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500 required">网关配置</p></div>
          <div class="col-sm-6">
            <div class="form-group" ng-class="{'has-error': config.gateway == undefined}">
              <div class="fg-line">
                <input type="text" ng-model="config.gateway" class="form-control" placeholder="格式：10.1.1.1/24" ng-pattern="regex">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500">DNS服务器</p></div>
          <div class="col-sm-6">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.dnsServer" class="form-control">
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-2"><p class="c-black f-500">域名</p></div>
          <div class="col-sm-6">
            <div class="form-group">
              <div class="fg-line">
                <input type="text" ng-model="config.domains" class="form-control">
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button class="btn btn-primary pull-right" ng-click="finish()" ng-class="{'disabled': !config.gateway}">&nbsp;&nbsp;&nbsp;完成&nbsp;&nbsp;&nbsp;</button>
        </div>
      </div>

    </div> <!-- end:slide wrapper -->
  </div> <!-- end:card body -->
</div>